<template>
	<view class="v-null">
		<view class="v-null-content">
			<slot>
				<view class="v-null-icon" v-if="showIcon">
					<slot name="icon">
						<view class="v-null-default-icon"></view>
					</slot>
				</view>
				<view class="v-null-text">{{ text }}</view>
			</slot>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { computed, inject } from 'vue';

const props = defineProps({
	text: {
		type: String,
		default: '暂无数据'
	},
	showIcon: {
		type: Boolean,
		default: true
	},
	iconSize: {
		type: Number,
		default: 40
	},
	textColor: {
		type: String,
		default: '#999999'
	},
	iconColor: {
		type: String,
		default: '#cccccc'
	}
});

const config = inject<any>('config');
const iconSizeStyle = computed(() => ({
	width: `${props.iconSize}rpx`,
	height: `${props.iconSize}rpx`
}));
</script>

<style lang="scss" scoped>
.v-null {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	text-align: center;
	font-size: v-bind("config.fontSize.smallText");
	color: v-bind('props.textColor');
}

.v-null-content {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.v-null-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 12rpx;
}

.v-null-default-icon {
	width: v-bind('iconSizeStyle.width');
	height: v-bind('iconSizeStyle.height');
	background-color: v-bind('props.iconColor');
	border-radius: 50%;
	position: relative;
	overflow: hidden;
}

.v-null-default-icon::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60%;
	height: 60%;
	background-color: #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.v-null-text {
	color: v-bind('props.textColor');
}
</style>
